<%-- 
    Document   : upload
    Created on : Nov 4, 2012, 10:58:57 AM
    Author     : ntfsbk
--%>

<%@page import="Ultility.Ultility"%>
<%@page import="java.util.List"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page  import="Objects.Album" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<title>UpLoad</title>
<!-- Bootstrap CSS Toolkit styles -->
<link rel="stylesheet" href="<%= request.getContextPath()%>/css/fileUploadCss/bootstrap.min.css">
<link rel="stylesheet" href="<%= request.getContextPath()%>/css/fileUploadCss/css/style.css">
<link rel="stylesheet" href="<%= request.getContextPath()%>/css/fileUploadCss/bootstrap-responsive.min.css">
<link rel="stylesheet" href="<%= request.getContextPath()%>/css/fileUploadCss/bootstrap-image-gallery.min.css">
<link rel="stylesheet" href="<%= request.getContextPath()%>/css/fileUploadCss/jquery.fileupload-ui.css">
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath()%>/css/upload.css"/>
<script type="text/javascript" src="<%= request.getContextPath()%>/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="<%= request.getContextPath()%>/js/expandsetting.js"></script>
</head>
<body style="line-height: 18px;">
<!-----------------------HEADER------------------------------------------------->
<div id="top">
<div id="account-bar">
	<div class="setting space">
    	<a class="bgspace" href="#">
	    	<img src="<%= request.getContextPath()%>/images/setting.png" />
        </a>
    </div>
                <% int userId=(Integer)request.getAttribute("userId"); 
                   Ultility ultility=new Ultility();
   String thumbnailProfileFileName=ultility.getFileNameAvatar(userId); %>
    <div class="icon space">
    	<a class="bgspace">
            <% if(thumbnailProfileFileName==null){%>
                                                 <img width="26" height="26" src="<%=  request.getContextPath() %>/profile/getThumb.htm?getthumb=defaultAvatar.jpg&size=26" />
                                                 <%} else{ 
                                                    String path=request.getContextPath() + "/profile/getThumb.htm?getthumb="+thumbnailProfileFileName+"&size=26";%>
                                                 %>
                                                 <img width="26" height="26" src="<%=  path %>" />
                                                   <%}%>
<!--        	<img src="<%= request.getContextPath()%>/images/icon.png"/>-->
        </a>
    </div>
    <a class="userName">${userName}</a>
</div>

        <div class="expand-setting">
	    <div class="expand-sub">
		<div class="expand-hover">
                    <a href="<%= request.getContextPath() %>/profile/profile.htm">Account Settings</a>
       	        </div>
            <div class="clear"></div>
        <div class="clear line" style="margin:5px 0;"></div>
       	<div class="expand-hover">
            <a href="<%= request.getContextPath() %>/login/logoutAction.htm">Log out</a>
        </div>
	</div>
        </div>

<div class="clear"></div>

<div class="banner" style="background:url(<%= request.getContextPath()%>/images/bg00.png) repeat-x left">
    	<div class="logo">
        	<img src="<%= request.getContextPath()%>/images/logo1.png" />
        </div>
        <div class="top-tab">
        	<div class="top-tab-active">
                <div class="top-tab-txt">
                    <a href="<%= request.getContextPath() %>/myphoto/myPhoto.htm"> My Photos</a>
                </div>
            </div>
        </div>
        <div class="top-tab">
        	<div class="top-tab-inactive">
                <div class="top-tab-txt">
                    <a href="Explore.html"> Explore</a>
                </div>
            </div>
        </div>
        
		<div class="upload">
        	<a href="<%= request.getContextPath() %>/upload/startupload.htm">Upload</a>
        </div>
        
        <div class="search" style="margin: 0;">
            <div class="search-form" >
                <form id="search-form" method="get" action="/lh/view" name="search-form" style=" margin: 0;">
                        <input id="search" type="text" value="" maxlength="128" size="25" name="q" style="margin-top: 5px;">
	                <input class="search-button" type="submit" value="Search">
                </form>
            </div>
        </div>        
    </div>
</div>
<!-----------------------BODY------------------------------------------------->
<div class="txt_header"> Upload Photos</div>
<div id="frame">
	<div id="infoAlbum" class="info-album new-album">
    	<span class="text">Album name:</span>
        <div id="textbox" class="form_albumName">
            <input id="newAlbumName" class="albumName" defaultvalue="${newAlbum}" value="${newAlbum}" type="text" maxlength="150">
        </div>
            <% List<Album> albums=(List<Album>) request.getAttribute("albums");%>
            <select id="albumName" style="display: none; float: left; margin: 7px 10px 1px 2px;" >
                <option value="-1">Select Album</option>
                <% for(int i=0;i<albums.size();++i){ 
                    Album album=albums.get(i);
                    if(album.getAlbumName().equals("profileAlbum")== false){%>
                          <option value="<%= album.getAlbumId() %>"><%= album.getAlbumName() %></option>
                <%}}%>
            </select>
        <span class="text">or</span>
        <div id="addButton" class="text select" role="button"> add to an existing album</div>
        <div id="createButon"class="text select" role="button" style="display: none"> create a new album</div>
    </div>
     <!-- The file upload form used as target for the file upload widget -->
     <form id="fileupload" action="<%= request.getContextPath()%>/upload.htm" method="POST" enctype="multipart/form-data">
    <div class="main_frame">
<!--    	<h1> Drag photos here</h1>
        <h3> or If you prefer...</h3>
        <div id="select-files-button">
			<div class="button select_photo" role="button">
            	Select photos from your computer
            </div>
		</div>-->
 <!-- The loading indicator is shown during file processing -->
        <div class="fileupload-loading"></div>
        <br>
        <!-- The table listing the files available for upload/download -->
        <table  id="downloadRow" urlRedirect="<%= request.getContextPath() %>/myphoto/myPhoto.htm" url="<%= request.getContextPath() %>/upload/save.htm" role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
    </div>
            <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="span7">
                <span class="btn btn-success fileinput-button">
<!--                    <i class="icon-plus icon-white"></i>-->
                    <span>Save</span>
                    <input id="save" type="button">
                </span>
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
<!--                    <i class="icon-plus icon-white"></i>-->
                    <span>Add files...</span>
                    <input type="file" name="files" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
<!--                    <i class="icon-upload icon-white"></i>-->
                    <span>Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
<!--                    <i class="icon-ban-circle icon-white"></i>-->
                    <span>Cancel upload</span>
                </button>
                <button type="button" class="btn btn-danger delete" style="display: none">
<!--                    <i class="icon-trash icon-white"></i>-->
                    <span>Delete</span>
                </button>
                <input type="checkbox" class="toggle" checked style="display: none">
            </div>
            <!-- The global progress information -->
            <div class="span5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="bar" style="width:0%;"></div>
                </div>
                <!-- The extended global progress information -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
</form>
</div>
<!-- modal-gallery is the modal dialog used for the image gallery -->
<div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a>
<!--        <h3 class="modal-title"></h3>-->
    </div>
    <div class="modal-body"><div class="modal-image"></div></div>
    <div class="modal-footer">
        <a class="btn modal-download" target="_blank">
            <i class="icon-download"></i>
            <span>Download</span>
        </a>
        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
            <i class="icon-play icon-white"></i>
            <span>Slideshow</span>
        </a>
        <a class="btn btn-info modal-prev">
            <i class="icon-arrow-left icon-white"></i>
            <span>Previous</span>
        </a>
        <a class="btn btn-primary modal-next">
            <span>Next</span>
            <i class="icon-arrow-right icon-white"></i>
        </a>
    </div>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
<!--        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>-->
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>{%=locale.fileupload.start%}</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>{%=locale.fileupload.cancel%}</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
             <td>
                 <input class="pictureName" value="" maxlength="50" type="text" placeholder="Write picture Name">
        </td>
            <td>
                <input class="pictureTag" value="" maxlength="50" type="text" placeholder="Write picture Tag">
        </td>
            <td class="name">
<!--                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>-->
                 <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}"></a>
            </td>
<!--            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>-->
<!--            <td colspan="2"></td>-->
        {% } %}
        <td class="delete">
            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                <i class="icon-trash icon-white"></i>
                <span>{%=locale.fileupload.destroy%}</span>
            </button>
            <input type="checkbox" name="delete" value="1" style="display: none">
        </td>
    </tr>
{% } %}
</script>
<script type="text/javascript" src="<%= request.getContextPath()%>/js/jquery-1.7.min.js"></script>
<script src="<%= request.getContextPath() %>/js/upload.js"></script>
<script src="<%= request.getContextPath() %>/js/fileUploadJs/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="<%= request.getContextPath() %>/js/fileUploadJs/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="<%= request.getContextPath() %>/js/fileUploadJs/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="<%= request.getContextPath() %>/js/fileUploadJs/load-image.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="<%= request.getContextPath() %>/js/fileUploadJs/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
<script src="<%= request.getContextPath() %>/js/fileUploadJs/bootstrap.min.js"></script>
<script src="<%= request.getContextPath() %>/js/fileUploadJs/bootstrap-image-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<%= request.getContextPath() %>/js/fileUploadJs/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="<%= request.getContextPath() %>/js/fileUploadJs/jquery.fileupload.js"></script>
<!-- The File Upload file processing plugin -->
<script src="<%= request.getContextPath() %>/js/fileUploadJs/jquery.fileupload-fp.js"></script>
<!-- The File Upload user interface plugin -->
<script src="<%= request.getContextPath() %>/js/fileUploadJs/jquery.fileupload-ui.js"></script>
<!-- The localization script -->
<script src="<%= request.getContextPath() %>/js/fileUploadJs/locale.js"></script>
<!-- The main application script -->
<script src="<%= request.getContextPath() %>/js/fileUploadJs/main.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
<!--[if gte IE 8]><script src="js/cors/jquery.xdr-transport.js"></script><![endif]-->
</body>
</html>

